<template>
    <el-main>
        <el-form
                :model="loginForm"
                ref="loginForm"
                :rules="rule"
                label-width="0"
                class="login-form">
            <h3>用户登录系统</h3>

            <el-form-item prop="userCode">
                <el-input
                        type="text"
                        v-model="loginForm.userCode"
                        placeholder="userCode" >
                </el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input
                        type="password"
                        v-model="loginForm.password"
                        placeholder="password" >
                </el-input>
            </el-form-item>

            <el-form-item >
                <el-button
                        type="danger"
                        class="submitBtn"
                        round
                        @click.native.prevent="submit"
                        :loading="logining">
                    登录
                </el-button>
                <el-button
                        type="primary"
                        class="resetBtn"
                        round
                        @click.native.prevent="reset">
                    重置
                </el-button>
                <hr>
                <p>还没有账号，马上去<span class="to" @click="toregin">注册</span></p>
            </el-form-item>
        </el-form>
    </el-main>
</template>

<script>
    export default {
        // ....
        data () {
            return {
                loginForm: {
                    userCode: '20190801540005',
                    password: '123456'
                },
                logining: false,
                rule: {
                    userCode: [
                        {
                            required: true,
                            max: 14,
                            min: 14,
                            message: '主号是必须的，长度为14位',
                            trigger: 'blur'
                        }
                    ],
                    password: [
                        {
                            required: true,
                            message: '密码是必须的！',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            // ...
            submit () {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.logining = true;
                        this.$store.dispatch("login",this.loginForm)
                            .then(res=>{
                                this.logining=false;
                                this.$router.push("/wechat/roomlist")
                            }).catch(res=>{
                            this.logining=false
                            })

                        
                    } else {
                        console.log('submit err')
                    }
                })
            },
            reset () {
                this.$refs.loginForm.resetFields()
            },
            toregin () {
                this.$router.push('/regin_page')
            }
        },
        mounted() {


        }
    }
</script>

<style scoped>
    .login-form {
        margin: 20px auto;
        width: 310px;
        background: #fff;
        box-shadow: 0 0 35px #B4BCCC;
        padding: 30px 30px 0 30px;
        border-radius: 25px;
    }
    .submitBtn {
        width: 65%;
    }
    .to {
        color: #67C23A;
        cursor: pointer;
    }
</style>

